<template>
  <div class="container">
    <van-empty
      class="h-[560px]"
      v-if="cp_tabs.length === 0"
      description="沟通创建人「未发言」，无法显示辅导内容"
    >
      <span class="text-[14px] text-[#969799]">
        若发言人标注错误，请<span class="text-yxt-blue px-1" @click="handleClickModify"
          >修改</span
        >后重新生成
      </span>
    </van-empty>
    <template v-else>
      <CustomTabBar
        class="tab-bar"
        :tabs="cp_tabs"
        @update:active="(v) => (active = v)"
        :active="active"
      />
      <!-- 概览 -->
      <CounsellingOverview
        v-ai-tip
        v-if="currentItem?.type === 'overview'"
        @onClickDetail="handleClickDetail"
      />
      <!-- 能力评估 -->
      <CounsellingAbilityAssessment
        v-ai-tip
        v-if="currentItem?.type === 'abilityAssessment'"
      />
      <!-- 任务达成 -->
      <CounsellingTaskCompletion v-ai-tip v-if="currentItem?.type === 'taskCompletion'" />
      <!-- 销售表现 -->
      <CounsellingSalesPerformance v-ai-tip v-if="currentItem?.type === 'performance'" />
      <CounsellingCommon
        v-ai-tip
        v-if="currentItem?.type === 'common'"
        :report="currentItem?.report"
      />
    </template>
  </div>
</template>

<script>
import CustomTabBar from "@/components/CustomTabBar.vue";
import CounsellingOverview from "./CounsellingOverview.vue";
import CounsellingSalesPerformance from "./CounsellingSalesPerformance.vue";
import CounsellingCommon from "./CounsellingCommon.vue";
import CounsellingAbilityAssessment from "./CounsellingAbilityAssessment.vue";
import CounsellingTaskCompletion from "./CounsellingTaskCompletion.vue";

import { useMinutesStore } from "@/store";
import { mapState } from "pinia";
import EventBus from "@/EventBus.js";
import { EventBusEnum } from "@/types";

export default {
  name: "CounsellingCompent",
  components: {
    CustomTabBar,
    CounsellingOverview,
    CounsellingSalesPerformance,
    CounsellingCommon,
    CounsellingAbilityAssessment,
    CounsellingTaskCompletion,
  },
  data() {
    return {
      active: 0,
    };
  },

  methods: {
    handleClickDetail(type) {
      let targetType = "";
      if (type === "ability") {
        targetType = "abilityAssessment";
      }
      if (type === "completionRate") {
        targetType = "taskCompletion";
      }
      this.cp_tabs.forEach((item, index) => {
        if (item.type === targetType) {
          this.active = index;
        }
      });
    },

    handleClickModify() {
      EventBus.emit(EventBusEnum.CHANGE_TAB_MAIN, 0);
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      salesPerformance: "salesPerformance",
      salesCounsellingReports: "salesCounsellingReports",
      isLabelAllParticipant: "isLabelAllParticipant",
      isSalesMeet: "isSalesMeet",
    }),

    currentItem() {
      console.log("currentItem: ", this.cp_tabs);
      if (this.cp_tabs.length === 0) {
        return null;
      }
      return this.cp_tabs[this.active];
    },

    cp_tabs() {
      let array = [];
      if (!this.salesPerformance?.length === 0) {
        array.push({ title: "销售表现", type: "performance" });
      }
      if (this.salesCounsellingReports.length < 5) {
        return array;
      }
      let tabs = this.salesCounsellingReports;
      console.log("tabs:", tabs);
      for (const item of tabs) {
        const { systemId, systemPreset } = item;
        if (systemId === 205) {
          array.push({ title: "能力评估", type: "abilityAssessment" });
        } else if (systemId === 206) {
          array.push({ title: "任务达成", type: "taskCompletion" });
        } else {
          if (!systemPreset) {
            array.push({
              title: item.name,
              type: "common",
              report: item.report,
            });
          }
        }
      }

      if (array.length > 0) {
        array.unshift({ title: "概览", type: "overview" });
      }

      return array;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: white;
}

.tab-bar {
  padding: 0 18px;
}
</style>
